<template>
    <div>
      <div class="add">
        <jxf-titletip :title="title" :hasRefresh="false" :hasGoBack="true" @goBack="goBack"></jxf-titletip>
        <el-form :model="channelInfo" class="mt20" :rules="rules" ref="channelInfo">
          <el-card class="jxf-table-card mt20">
            <div slot="header" class="clearfix">
              <span>基本信息</span>
            </div>
            <div class="listArea">
              <jxf-datalist :info="dataList">
                <template slot="telphone" slot-scope="scope">
                  <el-form-item prop="telphone" required>
                    <el-input v-model.trim="channelInfo.telphone" clearable></el-input>
                  </el-form-item>
                </template>
                <template slot="password" slot-scope="scope">
                  <el-form-item prop="password" required>
                    <el-input v-model.trim="channelInfo.password" type="password"></el-input>
                  </el-form-item>
                </template>
                <template slot="userName" slot-scope="scope">
                  <el-form-item prop="userName" required>
                    <el-input v-model.trim="channelInfo.userName" clearable></el-input>
                  </el-form-item>
                </template>
                <template slot="contact" slot-scope="scope">
                  <el-form-item prop="contact" required>
                    <el-input v-model.trim="channelInfo.contact" clearable></el-input>
                  </el-form-item>
                </template>
                <template slot="detailAdress" slot-scope="scope">
                  <el-form-item prop="detailAdress" required>
                    <el-input v-model.trim="channelInfo.detailAdress" clearable></el-input>
                  </el-form-item>
                </template>
                <template slot="address" slot-scope="scope">
                  <AreaInput :searchInfo.sync="channelInfo" clearable></AreaInput>
                </template>
              </jxf-datalist>
            </div>
          </el-card>
          <el-card class="jxf-table-card mt20">
            <div slot="header" class="clearfix">
              <span>资质信息</span>
            </div>
            <div class="listArea">
              <jxf-datalist :info="qualityList">
                <template slot="info" slot-scope="scope">
                  <el-row :gutter="10">
                    <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="4">
                      <div class="imgArea">
                        <!--<img :src="detailInfo.identityCard.value.split(',')[0]"/>-->
                        <viewer :images="identityCardFontImage && identityCardFontImage.split(',')" v-if="identityCardFontImage">
                          <div><img :src="identityCardFontImage"></div>
                        </viewer>
                        <img v-else>
                        <div class="operateBtn">
                          <el-button type="text" size="small" @click="showFrontCardCropper">点击上传</el-button>
                          <el-button size="small" type="text" @click="deleteFrontImg">删除</el-button>
                        </div>
                        <div class="imageBottom">法人身份证正面</div>
                      </div>
                    </el-col>
                    <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="4">
                      <div class="imgArea">
                        <!--<img :src="detailInfo.identityCard.value.split(',')[0]"/>-->
                        <viewer :images="identityCardBackImage && identityCardBackImage.split(',')" v-if="identityCardBackImage">
                          <div><img :src="identityCardBackImage"></div>
                        </viewer>
                        <img v-else>
                        <div class="operateBtn">
                          <el-button type="text" size="small" @click="showBackCardCropper">点击上传</el-button>
                          <el-button size="small" type="text" @click="deleteBackImg">删除</el-button>
                        </div>
                        <div class="imageBottom">法人身份证反面</div>
                      </div>
                    </el-col>
                    <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="4">
                      <div class="imgArea">
                        <!--<img :src="detailInfo.identityCard.value.split(',')[0]"/>-->
                        <viewer :images="channelInfo.licenseImage && channelInfo.licenseImage.split(',')" v-if="channelInfo.licenseImage">
                          <div><img :src="channelInfo.licenseImage"></div>
                        </viewer>
                        <img v-else>
                        <div class="operateBtn">
                          <el-button type="text" size="small" @click="showLicenseCardCropper">点击上传</el-button>
                          <el-button size="small" type="text" @click="deleteLicenseImg">删除</el-button>
                        </div>
                        <div class="imageBottom">营业执照</div>
                      </div>
                    </el-col>

                  </el-row>
                  <el-row :gutter="10" class="mt20">
                    <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="4" v-for="(item, index) in channelInfo.otherImage && channelInfo.otherImage.split(',')" :key="index" v-if="channelInfo.otherImage">
                      <div class="imgArea">
                        <!--<img :src="detailInfo.identityCard.value.split(',')[0]"/>-->
                        <viewer :images="item && item.split(',')">
                          <div><img :src="item"></div>
                        </viewer>
                        <div class="operateBtn">
                          <el-upload
                            class="upload-demo"
                            :action="upload"
                            :headers="header"
                            multiple
                            :file-list="fileList">
                          </el-upload>
                          <el-button size="small" type="text" @click="deleteOtherImg(index)">删除</el-button>
                        </div>
                        <div class="imageBottom">其它资质{{index + 1}}</div>
                      </div>
                    </el-col>
                    <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="4" v-if="!channelInfo.otherImage || channelInfo.otherImage.split(',').length < 10">
                      <el-button type="primary" @click="showOtherCardCropper" class="mt20">上传其它资质</el-button>
                    </el-col>
                  </el-row>
                </template>
              </jxf-datalist>
            </div>
          </el-card>
          <el-card class="jxf-table-card mt20">
            <div slot="header" class="clearfix">
              <span>补充信息</span>
            </div>
            <div class="listArea">
              <jxf-datalist :info="dataOtherList">
                <template slot="ownerName" slot-scope="scope">
                  <el-form-item prop="ownerName" required>
                    <el-input v-model.trim="channelInfo.ownerName"></el-input>
                  </el-form-item>
                </template>
                <template slot="idCardNo" slot-scope="scope">
                  <el-form-item prop="idCardNo" required>
                    <el-input v-model.trim="channelInfo.idCardNo"></el-input>
                  </el-form-item>
                </template>
                <template slot="cardNo" slot-scope="scope">
                  <el-form-item prop="cardNo" required>
                    <el-input v-model.trim="channelInfo.cardNo"></el-input>
                  </el-form-item>
                </template>
                <template slot="bankPhone" slot-scope="scope">
                  <el-form-item prop="bankPhone" required>
                    <el-input v-model.trim="channelInfo.bankPhone"></el-input>
                  </el-form-item>
                </template>
              </jxf-datalist>
            </div>
          </el-card>
          <el-form-item class="text-center">
            <el-button type="primary" class="mt20" @click="addChannel" :loading="isSuccess">保存</el-button>
          </el-form-item>
        </el-form>
      </div>
      <jxf-cropper
        :uploadUrl="upload"
        :isShowCropper.sync="isShowCropper"
        :tCropWidth="tCropWidth"
        :tCropHeight="tCropHeight"
        :dealImage.sync="dealImage"
        @getChangedImage="getChangeImage"
        :dataSize="5"></jxf-cropper>
    </div>
</template>

<script>
  import md5 from 'js-md5'
    export default {
        name: "AddChannel",
        data() {
          return {
            title: "新增渠道商",
            /*********/
            dealImage: '',
            tCropWidth: 800,
            tCropHeight: 800,
            currentImage: '',
            isShowCropper: false,
            /*********/
            upload: apis.architecture.upload,
            isSuccess: false,
            fileList: [],
            channelInfo: {
              bankPhone: "",
              cardNo: "",
              cityId: "",
              contact: "",
              detailAdress: "",
              idCardNo: "",
              ownerName: "",
              password: "",
              provinceId: "",
              telphone: "",
              userName: "",
              identityCardImage: "",
              licenseImage: "",
              otherImage: ""
            },
            // 法人正面
            identityCardFontImage: "",
            identityCardBackImage: "",
            header: {
              token: JSON.parse(window.localStorage.adminLogin).token
            } ,
            qualityList: [
              {
                label: "*资质信息",
                type: 'info'
              },
            ],
            rules: {
              telphone: [
                {required: true, message: '请输入手机号',trigger: ['blur', 'change']},
                {validator: validate.phone, trigger: 'blur'}
              ],
              ownerName: [
                {required: true, message: '请输入真实姓名',trigger: ['blur', 'change']},
              ],
              password: [
                {required: true, message: '请输入密码',trigger: ['blur', 'change']},
                { min: 6, max: 12, message: '密码长度为6-12位', trigger: ['blur', 'change'] },
              ],
              userName: [
                {required: true, message: '请输入名称',trigger: ['blur', 'change']},
              ],
              contact: [
                {required: true, message: '请输入联系电话',trigger: ['blur', 'change']},
                {validator: validate.phone, trigger: 'blur'}
              ],
              detailAdress: [
                {required: true, message: '请输入联系地址',trigger: ['blur', 'change']},
              ],
              idCardNo: [
                {required: true, message: '请输入身份证号',trigger: ['blur', 'change']},
                {validator: validate.idCardNo, trigger: 'blur'}
              ],
              cardNo: [
                {required: true, message: '请输入银行卡号',trigger: ['blur', 'change']},
                {validator: validate.bankCard, trigger: 'blur'}
              ],
              bankPhone: [
                {required: true, message: '请输入预留手机号',trigger: ['blur', 'change']},
                {validator: validate.phone, trigger: 'blur'}
              ],
            },
            dataList: [
              {
                label: "*账号",
                type: 'telphone'
              },
              {
                label: "*密码",
                type: 'password'
              },
              {
                label: "*名称",
                type: 'userName'
              },
              {
                label: "*联系电话",
                type: 'contact'
              },
              {
                label: "*联系地址",
                type: 'detailAdress'
              },
              {
                label: "*地区",
                type: 'address'
              }
            ],
            dataOtherList: [
              {
                label: "*真实姓名",
                type: 'ownerName'
              },
              {
                label: "*身份证号",
                type: 'idCardNo'
              },
              {
                label: "*银行卡号",
                type: 'cardNo'
              },
              {
                label: "*预留手机号",
                type: 'bankPhone'
              }
            ]
          }
        },
        methods: {
          /**********/
          showFrontCardCropper() {
            this.dealImage = this.identityCardFontImage;
            this.currentImage = '1';
            this.isShowCropper = true;
          },
          showBackCardCropper() {
            this.dealImage = this.identityCardBackImage;
            this.currentImage = '2';
            this.isShowCropper = true;
          },
          showLicenseCardCropper() {
            this.dealImage = this.channelInfo.licenseImage;
            this.currentImage = '3';
            this.isShowCropper = true;
          },
          showOtherCardCropper() {
            this.dealImage = '';
            this.currentImage = '4';
            this.isShowCropper = true;
          },
          getChangeImage(val) {
            switch (this.currentImage) {
              case '1':
                this.identityCardFontImage = val;
                break;
              case '2':
                this.identityCardBackImage = val;
                break;
              case '3':
                this.channelInfo.licenseImage = val;
                break;
              case '4':
                let list = this.channelInfo.otherImage ? this.channelInfo.otherImage.split(',') : []
                list.push(val)
                this.channelInfo.otherImage = list.join(',')
                break;
              default:
                break;
            }
          },
          /**********/
          goBack() {
            this.$emit('goBack')
          },
          resetForm() {
            this.dealImage = '';
            this.currentImage = '';
            this.$refs['channelInfo'].resetField()
          },
          postIdentityFrontCard(response, file, fileList) {
            if(response.code === "10000000") {
              this.identityCardFontImage = response.data.fileUrl
            } else {
              this.$message.error(response.message)
            }
          },
          postOtherImg() {

          },
          deleteOtherImg(index) {
            let array = this.channelInfo.otherImage ? this.channelInfo.otherImage.split(',') : [];
            if(this.channelInfo.otherImage && this.channelInfo.otherImage.split(',')) {
              array.splice(index, 1)
              this.channelInfo.otherImage = array.join(',')
            }
          },
          handleRemove() {

          },
          deleteFrontImg() {
            this.identityCardFontImage = ""
          },
          deleteLicenseImg() {
            this.channelInfo.licenseImage = ""
          },
          postIdentityotherImageCard(response, file, fileList) {
            let list = this.channelInfo.otherImage ? this.channelInfo.otherImage.split(',') : []
            if(response.code === "10000000") {
              list.push(response.data.fileUrl)
              this.channelInfo.otherImage = list.join(',')
            } else {
              this.$message.error(response.message)
            }
          },
          postIdentitylicenseCard(response, file, fileList) {
            if(response.code === "10000000") {
              this.channelInfo.licenseImage = response.data.fileUrl
            } else {
              this.$message.error(response.message)
            }
          },
          deleteBackImg() {
            this.identityCardBackImage = ""
          },
          postIdentityBackCard(response, file, fileList) {
            if(response.code === "10000000") {
              this.identityCardBackImage = response.data.fileUrl
            } else {
              this.$message.error(response.message)
            }
          },
          addChannel() {
            if(!this.identityCardFontImage) {
              this.$notify({
                title: '警告',
                message: '法人身份证正面照不能为空',
                type: 'warning'
              });
              return;
            }
            if(!this.identityCardBackImage) {
              this.$notify({
                title: '警告',
                message: '法人身份证反面照不能为空',
                type: 'warning'
              });
              return;
            }
            let data = {
              ...this.channelInfo,
              password: md5(this.channelInfo.password).toUpperCase(),
              identityCardImage: this.identityCardFontImage + ',' + this.identityCardBackImage
            }
            this.$refs['channelInfo'].validate((valid) => {
              if (valid) {
                this.isSuccess = true;
                ajax.post(apis.architecture.addChannel, data).then(res => {
                  if(res.code === "10000000") {
                    this.$message({
                      type: 'success',
                      message: '新增渠道商成功!'
                    });
                    this.$emit('fresh')
                    this.$emit('goBack')
                  } else {
                    this.$message.error(res.message)
                  }
                  this.isSuccess = false;
                });
              }})
          }
        }
    }
</script>
<style scoped>
.el-input {
  width: 300px;
}
.el-form-item {
  margin-bottom: 16px;
}
.imageBottom {
  height: 40px;
  line-height: 40px;
  width: 140px;
  text-align: center;
  background: rgba(249, 250, 252, 1);
  border: 1px solid rgba(228, 228, 228, 1);
}
.operateBtn {
  display: flex;
  justify-content: space-between;
  padding: 3px 10px;
  width: 140px;
  background: #f9f9f9;
  box-sizing: border-box;
}
.imgArea {
  margin-top: 10px;
  width: 140px;
  border: 1px solid rgba(228, 228, 228, 1);
}

img {
  width: 120px;
  height: 100px;
  margin-left: 10px;
}

.btn-area {
  margin-top: 20px;
}

</style>
<style lang="scss">
  .el-upload-list {
    display: none !important;
  }
</style>
